<template>
  <div class="search">
    <div class="searchBar">
      <div class="sBox">
        <input type="text" placeholder="输入关键字" v-model="keywords" />
        <span class="iconfont icon-guanbi" @click="del" v-show="keywords.length>0"></span>
      </div>
        <span class="searchBtn" @click="searchKeyWords()">搜索</span>
    </div>
    <div class="suggest clearfix" v-show="suggestShow">
      <h5>热门搜索</h5>
      <span class="fl" v-for="(words,index) in hots" :key="index" 
        @click="keywords = words.first">{{words.first}}</span>
    </div>
    <div class="result" v-show="!suggestShow" >
      <songs v-for="(r,index) in result.songs" :key="r.id" 
        :songdata="{name:r.name,artist:r.artists,album:r.album,index}" :songlist="result.songs"
      ></songs>
    </div>
  </div>
</template>

<script>
import songs from '../components/songs.vue';
import { Indicator } from 'mint-ui';
export default {
  
  mounted () {
    this.axios("/search/hot").then((res)=>{
      console.log(res.data.result.hots);
      this.hots = res.data.result.hots
    })
  },
  data(){
    return {
      hots:[],
      keywords:"",
      result:[],
      suggestShow:true,
      idlist:[]
    }
  },
  methods: {
    searchKeyWords(){
      if(this.keywords==""){
        return ;
      }
      Indicator.open({
        text: '搜索中....',
        spinnerType: 'fading-circle'
      });
      this.axios.get("/search",{params:{keywords:this.keywords,limit:20}}).then((res)=>{
        this.result = res.data.result;
        this.suggestShow = false;
        
        Indicator.close();
      })
    },
    del(){
      this.keywords = "";
      this.suggestShow = true;

    }
  },
  components: {
    songs
  }
}
</script>


<style lang="scss" scoped>
.searchBar{
  width: 100%;
  text-align: center;
  padding: 20px;
  background-color: #f0f0f0;
  .sBox{
    display: inline-block;
    width: 80%;
    height: 100%;
    border-radius: 20px;
    border:1px solid #c8c8c8;
    padding:4px 10px;
    text-align: left; 
    input{
      appearance: none;
      outline: none;
      border: none;
      background: transparent;
      color: #666;
      font-size: 14px;
      width: calc(100% - 20px);
    }
    .iconfont{
      font-size: 10px;
      vertical-align: middle;
    }
  }
  .searchBtn{
    vertical-align: top;
    font-size: 13px;
    padding: 4px; 
    display: inline-block;
    text-align: center;
    width: 15%;
    height: 100%;
    margin-left: 5%;
    border: 1px solid #a1a1a1;
    border-radius: 8px;
  }
}

.suggest{
  padding: 0 20px;
  h5{
    line-height: 40px;
  }
  span{
    padding: 4px 8px;
    font-size: 13px;
    margin-right: 6px;
    border: 1px solid #c8c8c8;
    border-radius: 20px;
    margin-bottom: 10px;

  }
}
.result{
  padding: 0 20px;
}
</style>
